import React from 'react';
//引入react-dom中的 createRoot,创建DOM渲染根节点
//它是React18引入的新特性，可以实现并发渲染模式
import {createRoot} from 'react-dom/client';
//getElementById获取一个DOM容器节点
//createRoot方法的调用创建一个React根渲染节点
//调用render方法在根节点上渲染出一个字符串hello
const root   = createRoot(document.getElementById('root'))
//创建一个元素 
//let element = React.createElement('p',{id:'box'},'hello');
let element = <p id="box">hello</p>
console.log(element)
//把元素变成真实DOM并且插入到root容器中
root.render(element);
setTimeout(()=>{
    //因为元素具有不变性，所以说如果想修改页面，不能直接修改元素，需要创建一个新的元素并且重新渲染来修改页面
    //let element = React.createElement('span',{id:'content'},'hello','world');
    let element = <span id="content">hello world</span>
    console.log(element)
    root.render(element);
},6000);

//.render(<p id="box">hello</p>);
